import React from 'react'
import _ from 'lodash'

import Card from '../../../../components/Card'
import Grid from '../../../../components/Grid'
import Tab from '../../../../components/Tab'
import Progress from '../../../../components/Progress'
import Accordion from '../../../../components/Accordion'
import Benchmarking from '../../components/Benchmarking'

// Data
import {
  taskOverviewData,
  taskTabsData,
  taskProgressData,
} from '../../data'

import styles from '../../styles.less'

const accordionHeader = [{
  title: '废矿物油综合利用项',
  header: (
    <div className={styles.header}>
      <div>
        <span>废矿物油综合利用项目</span>
      </div>
      {/* TODO change status */}
      <span className={styles.status}>已完成</span>
    </div>
  ),
  children: [{
    title: '行政区划',
    value: '绍兴市',
  }, {
    title: '项目规模',
    value: '5万吨/年'
  }, {
    title: '建设单位',
    value: '绍兴光之源环保有限公司'
  }, {
    title: '项目进度',
    value: '已完成'
  }]
}].map(item => {
  return _.merge(item, {
    isMore: true,
    url: '/App/taskDetails'
  })
})

export default class TaskItems extends React.Component {
  state = {
    overviewData: [],
    tabs: [],
    progressData: [],
  }

  componentDidMount() {
    this.getOverviewData()
    this.getTabs()
    this.getProgressData()
  }

  getOverviewData = () => {
    this.setState({
      overviewData: taskOverviewData,
    })
  }

  getTabs = () => {
    this.setState({
      tabs: taskTabsData,
    })
  }

  getProgressData = () => {
    this.setState({
      progressData: taskProgressData,
    })
  }

  render() {
    const {
      overviewData,
      taskTabsData,
      progressData,
    } = this.state

    return (
      <div>
        <Card
          title='工作报告总览'
          extra='绍兴市'
          showRight
          showPop
        >
          <Grid data={overviewData} />
        </Card>
        <Benchmarking />

        <Card
          title='任务列表'
          showRight
          icon='search'
        >
          <Tab tabs={taskTabsData}>
            <div className={styles.container + ' ' + styles.container_project}>
              {
                progressData.map(item => (
                  <Progress
                    key={item.progress}
                    progress={item.progress}
                    progressColor={item.progressColor}
                  />
                ))
              }
            </div>
            <div>
              Content of second tab
            </div>
            <div>
              Content of third tab
            </div>
            <div>
              Content of fourth tab
            </div>
          </Tab>
        </Card>

        <Accordion data={accordionHeader} />
        <div style={{
          height: '50px'
        }} />
      </div>
    )
  }
}